import { useEffect, useLayoutEffect, useRef, useState } from 'react';
export const useCustomLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
// 当你使用 useLayoutEffect 的时候就用 useCustomLayoutEffect 代替。这样在服务端就会用 useEffect ，这样就不会报 warning 了。

const LayoutEffect = () => {
    const [text, setText] = useState('大伟聊前端');
    const videoRef = useRef(null);
    // useEffect
    useEffect(() => {
        let i = 0;
        while (i < 100000000) {
            i++;
        }
        setText('聊前端');
    }, [text]);

    const toogle = () => {
        if (document.pictureInPictureElement) {
            document.exitPictureInPicture();
        } else if (document.pictureInPictureEnabled) {
            videoRef.current.requestPictureInPicture();
        }
    };
    return (
        <>
            <div>{text}</div>
            <hr />
            <video
                ref={videoRef}
                width="300px"
                height="300px"
                src="https://mdn.github.io/dom-examples/picture-in-picture/assets/bigbuckbunny.mp4"
            ></video>
            <button onClick={toogle}>pic in pic </button>
        </>
    );
};

export default LayoutEffect;
